<template>
  <el-dialog title='任务详情' :visible.sync="dialogVisible">
    <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
    <el-tab-pane label="任务流程" name="first" class="panel">
      <el-timeline>
        <el-timeline-item
          v-for="(activity, index) in activities"
          :key="index"
          :timestamp="activity.time"  placement="top" class="timeline">
          <span  v-if="activity.assignee" class="assignee">{{activity.assignee}}</span>
          <span class="activityName">{{activity.activityName}}</span>
        </el-timeline-item>
      </el-timeline>
    </el-tab-pane>
    <el-tab-pane label="任务详情" name="second">任务详情</el-tab-pane>
  </el-tabs>
  </el-dialog>
</template>
<script>
  import utils from '@/assets/utils/zhzf-util';
  import workflowApi from '@/api/system/workflow';
  export default {
    name: "roleDetail",
    data() {
      return {
        readonly: false,
        loading: false,
        dialogVisible: false,
        allMenus: [],
        checkMenus: [],
        detail: {},
        activeName: 'first',
        activities: []
      };
    },
    methods: {
      initPage(detail, readonly) {
        this.readonly = readonly;
        this.detail = detail || {};
        this.dialogVisible = true;
        this.historyTaskActivity(detail);
      },
      async historyTaskActivity(detail){
        let resp = await workflowApi.historyTaskActivity()
        var tempArr = [];
        if(resp){
          let data = resp.data;
          for(let i = 0; i < data.length; i++){
            if(data[i].processDefinitionId == detail.processDefinitionId){
              tempArr.push(data[i]);
            }
          }
          for(let j = 0; j < tempArr.length; j++){
            tempArr[j].time = utils.formatDts(tempArr[j].time, 'YYYY-MM-DD HH:mm:ss')
          }
          this.activities = tempArr;
        }
      },
      handleClick(tab, event) {
        // console.log(tab, event);
      }
    }
  };
</script>

<style lang="scss">
  .panel{
    max-height:600px;
    overflow: auto;
    .assignee{
      margin-right:12px;
    }
  }
</style>


